<template>
    <div class="radio">
<ul>
  <li v-for="id in radios" :key="id">
<div class="smallbox">
  <img src="">
  <span>{{ id .name }}</span>
</div>
<b>{{ id.title }}</b>
<p>第{{ id.id }}期
  <i class="iconfont">&#xe721;</i>{{ id.number }}
</p>

<div class="btn" @click="jump"></div>
  </li>
</ul>
    </div>
</template>

<script>
import { getradios } from '@/api/radio'
export default {
  name: 'Radio',
  data () {
    return {
      radios: []
    }
  },
  methods: {
    jump () {
      this.$router.push('/brodcast')
    }
  },
  created () {
    getradios()
      .then(res => {
        this.radios = res.list
        // console.log(res.list)
      })
      .catch(err => console.log('异常：', err))
  }
}
</script>

<style lang="scss" scoped>
.radio{
  ul{
    list-style: none;
    li{
      margin: 0 auto;
       width: 300px;
    height: 275px;
    border: 1px solid red;
    box-shadow: black;
    border-radius: 10px;
    background-color: grey;
    .smallbox{
    width: 255px;
    height: 175px;
    border: 1px solid red;
    margin: 10px auto;
    border-radius: 10px;
    background-color: lightgrey;
    span{
      width: 35px;
      height: 15px;
      background-color: red;
      display: block;
      float: right;
      margin: 10px 0;
      color: yellowgreen;
      font-size: 10px;
      text-align: center;
    }
    }
     b{
        margin: 10px 20px;
        display: block;
      }
      p{
        margin: 10px 20px;
        display: block;
      }
      .btn{
        width: 20px;
        height: 20px;
        background-color: red;
        border-radius: 50%;
        float: right;
        margin: -20px 20px;
      }
    }
  }
}
</style>
